<script setup lang="ts">
import { ref } from "vue";
import { useMenuStore } from "@/stores/menu";
import TarotMenuTree from "@/views/components/TarotMenuTree.vue";
import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
import "@/assets/css/navigation.scss"

const menusStore = useMenuStore();

const data = ref({
  currentPath: window.location.pathname,
  isCollapse: false,
});

/**
 * 展开菜单
 * @param key
 * @param keyPath
 */
const openMenu = (key: string, keyPath: string[]) => {}

/**
 * 隐藏菜单
 * @param key
 * @param keyPath
 */
const closeMenu = (key: string, keyPath: string[]) => {}

/**
 * 选择菜单
 * @param key
 * @param keyPath
 */
const selectMenu = (key: string, keyPath: string[]) => {}

/**
 * 菜单伸缩
 */
const menuFold = () => {
  data.value.isCollapse = !data.value.isCollapse;
  menusStore.setCollapse(data.value.isCollapse);
}
</script>

<template>
  <nav>
    <el-menu default-active="1" class="tarot-menu" :collapse="data.isCollapse" :unique-opened="true"
        @select="selectMenu" @open="openMenu" @close="closeMenu" router >
      <!-- 递归菜单 -->
      <TarotMenuTree :menus="menusStore.getMenu()"></TarotMenuTree>
      <!-- 导航控制 -->
      <el-menu-item @click="menuFold" index="">
        <el-icon><component :is="data.isCollapse ? ArrowRightBold : ArrowLeftBold" /></el-icon>
        <template #title>
          <span>{{ data.isCollapse?"展开导航":"收起导航" }}</span>
        </template>
      </el-menu-item>

    </el-menu>
  </nav>
</template>

<style scoped lang="scss">
</style>
